<template>
    <div class="article-details">
        <div class="article-title">{{resultList.article_title}}</div>
        <div class="article-info">
            <span>发布人：charsle</span>
            <span>发布时间：{{resultList.article_date}}</span>
            <span>关键字：
                <template v-for="(item,key) of resultList.article_tag">
                    <em class="box-tag" :key="key">{{item}}</em>&nbsp;&nbsp;
                </template>
            </span>
        </div>
        <div class="zhuanzai" v-if="resultList.is_original==0">
            转载：
            <a :href="resultList.article_url">{{resultList.article_url}}</a>
        </div>
        <div class="box-desc">{{resultList.article_sign}}</div>
        <div class="mt20 article-content" v-html="resultList.article_content"></div>
        <!-- {{resultList}} -->
        <div class="discuss-wapper">
            <div class="discuss-list">
                <div class="discuss-default">
                    <img src="/static/images/foot.png" alt="">
                </div>
                <div class="discuss-info">
                    <label for="">
                        <span>江湖名号:</span> <input type="text" v-model.trim="formParams.discuss_name" maxlength="10" placeholder="请输入您的名号">
                    </label>
                    <label for="" class="mt10 discuss-content">
                        <span>留下暗号:</span>
                        <textarea rows="5" maxlength="100" v-model.trim="formParams.discuss_content" placeholder="请输入您的暗号"></textarea>
                    </label>
                    <label for="" class="tr mt10" style="width:60%">
                        <span class="red">{{error}}</span>
                        <button type="button" @click="submitArticleDiscuss">提交</button>
                    </label>
                </div>
            </div>

            <div class="discuss-total">
                评论({{discussList.length}})
            </div>
            <template v-for="item of discussList">
                <div class="discuss-list list-item" :key="item.discuss_id">
                    <div class="discuss-default">
                        <img src="/static/images/foot.png" alt="">
                    </div>
                    <div class="discuss-info">
                        <label for="">
                            江湖名号：{{item.discuss_name}}
                            <span class="ml20">时间：{{item.discuss_date}}</span>
                        </label>
                        <label for="" class="mt10">
                            {{item.discuss_content}}
                        </label>
                    </div>
                </div>
            </template>
            <!-- <div class="discuss-list list-item">
                <div class="discuss-default">
                    <img src="/static/images/foot.png" alt="">
                </div>
                <div class="discuss-info">
                    <label for="">
                        大侠：时间：2018-12-12 12:12:12
                    </label>
                    <label for="" class="mt20">
                        阿斯顿阿贾克斯会打开的哈萨克等
                    </label>
                </div>
            </div> -->
        </div>

    </div>
</template>

<script>
import service from '@/service';
export default {
    data() {
        return {
            resultList: {},
            error: '',
            discussList: [],
            formParams: {
                discuss_name: '',
                discuss_content: ''
            }
        }
    },
    created() {
        this.queryArticleById();

    },
    methods: {
        async submitArticleDiscuss() {
            if (this.formParams.discuss_content == '') {
                this.error = '请输入您的暗号！'
                return;
            } else {
                this.error = '';
            }
            let params = Object.assign({}, this.formParams, { article_id: this.resultList.article_id, discuss_status: 0 })
            let result = await service.addBlogArticleDiscuss(params);
            if (result.success) {
                this.error = '您的暗号已经提交'
            }
        },
        async queryArticleDiscussList(page = 1) {
            let params = {
                page: page,
                pageSize: this.pageSize,
                article_id: this.resultList.article_id
            }
            let result = await service.queryBlogArticleDiscuss(params);
            if (result.success) {
                this.discussList = result.data.pageList;
            }
        },
        async queryArticleById() {
            let loading = document.getElementById('show-loading')
            loading.style.display = 'flex'
            this.loading = true;
            let id = (this.$route.query.article_id);
            let result = await service.getBlogArticleItem({ article_id: id });
            if (result.data == null) {
                setTimeout(() => {
                    this.$router.push({ name: 'home' })
                }, 1000);
                return;
            }
            if (result.success) {
                let res = result.data;
                res.article_tag = JSON.parse(res.article_tag);
                this.resultList = res
                loading.style.display = 'none'
                this.queryArticleDiscussList();
            }
        },
    },
}
</script>

<style scoped>
.list-item {
  margin-top: 20px;
}
.list-item .discuss-info {
  background: #f3f3f3;
  padding: 10px;
  border: 1px dashed #59c3f5;
  border-radius: 5px;
}
.discuss-total {
  padding: 10px 20px;
  border-bottom: 1px dashed #59c3f5;
}
.discuss-wapper {
  padding: 20px;
  /* background: rgb(212, 211, 211); */
  /* border-radius: 5px; */
  margin-top: 20px;
  border-top: 2px solid #26b3f5;
}
.discuss-list {
  display: flex;
  justify-content: space-between;
}
.discuss-info {
  flex: 3;
}
.tr {
  text-align: right;
}
.discuss-info label {
  display: block;
}
.discuss-info button {
  background: #59c3f5;
  padding: 5px 20px;
  border: 1px solid #26b3f5;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.discuss-info button:hover {
  background: #09acf8;
}
.discuss-content {
  margin-top: 10px;
}
.discuss-content span {
  vertical-align: top;
}
.discuss-info input {
  width: 50%;
  border: 1px solid #999;
  background: transparent;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
  margin-left: 10px;
}
.discuss-info textarea {
  width: 50%;
  border: 1px solid #999;
  background: transparent;
  padding: 5px;
  border-radius: 5px;
  margin-left: 10px;
}
.discuss-default {
  width: 150px;
  display: flex;
  justify-content: center;
}
.discuss-default img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: rotate 5s infinite;
}
@keyframes rotate {
  0% {
    /* transform: rotate(0deg); */
    transform: scale(0.8)
  }
  50%{
        transform: scale(0.5)
  }
  100% {
    /* transform: rotate(360deg); */
     transform: scale(0.8)
  }
}
.zhuanzai {
  /* text-align: center; */
  padding: 10px;
}
.article-details {
  width: 80%;
  margin: 20px auto;
}
.article-title {
  font-size: 26px;
  text-align: center;
}
.article-content {
  font-size: 16px;
  position: relative;
}

.article-info {
  margin-top: 20px;
  padding: 10px;
  display: flex;
  background: #f1f1f1;
  border: 1px dashed #f3f3f3;
  justify-content: center;
}
.article-info span {
  margin-right: 10px;
  color: #999;
}
</style>